<!-- Start: Library Tab -->
<div id="tab1" class="tabcontent">
    <div id="tabLibrary">
        <div class="actions floatleft">
            <a href="" class="button" id="action_RefreshIndexes" title="Refresh Indexes" ng-click="getIndexes()"><img class="pad" src="images/reload_9x11.png" /></a>
            <a href="" class="button" id="action_RescanLibrary" title="Rescan Library" ng-click="rescanLibrary()"><img class="pad" src="images/loop_alt1_gd_12x9.png" /></a>
        </div>
        <div id="search">
            <input type="text" id="Search" class="medium" title="Wildcards (*) supported" placeholder="Search..." ng-enter="search()"/>
            <select id="SearchType" name="SearchType">
                <option value="audio">Audio</option>
                <option value="album">Album</option>
            </select>
            <a href="" class="button" id="action_Search" title="Search" ng-click="search()"><img class="pad" src="images/magnifying_glass_alt_12x12.png" /></a>
        </div>
        <div class="subactions">
            <a href="" class="button" id="action_SelectAll" title="Select All" ng-click="selectAll()">All</a>
            <a href="" class="button" id="action_SelectNone" title="Select None" ng-click="selectNone()">None</a>
            <a href="" class="button" id="action_AddToQueue" title="Add To Queue" ng-click="addMediaElementsToQueue()">+ Queue</a>
            <a href="" class="button" id="action_AddToPlaylist" title="Add Selected To Playlist" ng-click="addMediaElementsToPlaylist()">+ Playlist</a>
            <div id="submenu_AddToPlaylist" class="submenu shadow" style="display: none;" data-bind="foreach: playlistMenu">
                <a href="#" data-bind="attr: { id: id }, html: name, click: $root.addToPlaylist"></a><br />
            </div>
        </div>
        <div class="clear"></div>
        <div id="SMSMediaBrowser" class="section lgsection">
            <div id="SMSIndexes" class="ui-layout-west noselect hide" tabindex="0">
                <div id="AZIndex" ng-show="!settings.HideAZ" class="subactionsfixed">
                    <a href="" ng-click="toggleAZ()" stop-event="click">A-Z</a>
                </div>
                <div id="submenu_AZIndex" class="submenu shadow" style="display: none;">
                    <ul>
                    <li ng-repeat="o in index"><a href="" ng-click="scrollToIndexName(o.name)">{{o.name}}</a></li>
                    <li><a href="" class="close" ng-click="scrollToIndexName('AZIndex')">[Top]</a></li>
                    <li><a href="" class="close" ng-click="toggleAZ()">[Close]</a></li>
                    </ul>
                </div>
                <select id="mediaFolders" class="folders" ng-model="$root.selectedMediaFolder" ng-click="getIndexes()" ng-options="o as o.name for o in mediaFolders">
                    <option value="">All Folders</option>
                </select>
                <ul id="MediaBrowserSortContainer" class="simplelist mainlist noselect">
                <li class="index" id="sort">Sort By</li>
                <li class="item" ng-repeat="o in MediaBrowserSort" id="{{o.id}}" ng-click="getMediaElementList(o.id)" ng-class="{'selected': selectedMediaBrowserSort == o.id }"><span>{{o.name}}</span> 
                    <div class="floatright">
                    <a href="" class="nextprev hover" id="random" title="Previous" ng-click="getMediaElementList(o.id, 'prev')" stop-event="click">&lsaquo;</a> 
                    <a href="" class="nextprev hover" id="random" title="Next" ng-click="getMediaElementList(o.id, 'next')" stop-event="click">&rsaquo;</a>
                    </div>
                </li>
                </ul>
                <!-- Index Element -->
                <ul class="simplelist mainlist noselect" ng-repeat="o in index">
                    <li class="index" title="Scroll to Top" id="{{o.name}}" ng-click="scrollToTop()"><a>{{o.name}}</a></li>
                    <ul class="simplelist mainlist noselect">
                        <li class="item" id="{{a.id}}" ng-repeat="a in o.indexElement" ng-class="{'selected': selectedIndex == a.id}" ng-click="getMediaDirectory(a.id)"><span>{{a.name}}</span></li>
                    </ul>
                </ul>
            </div>
            <!-- Directory -->
            <div class="ui-layout-center">
                <ul class="actionlist">
                    <li>
                    <form class="form">
                    <select id="selectedLayout" ng-model="selectedLayout" ng-options="o.id as o.name for o in Layouts"></select>
                    </form>
                    </li>
                </ul>
                <div class="clear"></div>
                <ul class="simplelist mediaelementlist noselect">
                <li class="directory" id="{{o.id}}" ng-class="{'selected': selectedDirectory == o.id, 'directoryGrid': selectedLayout == 'grid'}" ng-click="getMediaElements(o.id, '')" ng-repeat="o in directory" parentid="{{o.parentId}}">
                    <div class="itemactions">
                        <a class="add" href="" title="Add To Play Queue" ng-click="getMediaElements(o.id, 'add')" stop-event="click"></a>
                        <a class="play" href="" title="Play" ng-click="getMediaElements(o.id, 'play')" stop-event="click"></a>
                        <a class="download" href="" ng-click="download(o.id)" title="Download" stop-event="click"></a>
                    </div>
                    <div class="coverArt"><img ng-src="{{o.coverArtThumb}}" src="images/coverdefault_160.jpg"></div>
                    <div class="directoryinfo">
                        <div class="title" title="{{o.name}}"><span>{{o.name}}</span></div>
                    </div>
                    <div class="clear"></div>
                </li>
                </ul>
            </div>
            <!-- MediaElements -->
            <div class="ui-layout-east noselect hide" ng-include src="'js/partials/mediaElements.html'"></div>
        </div>
    </div>
<div class="clear"></div>
</div>
<!-- End: Library Tab -->